<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人中心 - 心理健康科普平台</title>
    <link rel="stylesheet" href="../css/userCenter.css">
    <link rel="stylesheet" href="../css/navbar.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/search.css">
    <script src="../utils/pageSelectUtils.js"></script>
    <script src="../js/user.js"></script>
    <script src="../js/auth.js"></script>
    <script src="../js/navbar.js"></script>
    <script src="../js/userCenter.js"></script>
</head>
<body>
    <!-- 引入导航栏 -->
    <div id="navbar-container"></div>

    <div class="container">
        <!-- 个人信息展示 -->
        <div class="user-info-section">
            <div class="info-item">
                <label>用户名</label>
                <p id="info-username">用户名</p>
            </div>
            <div class="info-item">
                <label>真实姓名</label>
                <p id="info-realname">张三</p>
            </div>
            <div class="info-item">
                <label>邮箱</label>
                <p id="info-email">user@example.com</p>
            </div>
            <div class="info-item">
                <label>手机号码</label>
                <p id="info-phone">138****1234</p>
            </div>
        </div>

        <div class="tabs">
            <div class="tab active" data-tab="edit">修改信息</div>
            <div class="tab" data-tab="articles">文章管理</div>
        </div>

        <!-- 个人信息修改 -->
        <div class="tab-content active" id="edit-content">
            <form id="edit-profile-form">
                <div class="form-group">
                    <label for="edit-username">用户名</label>
                    <input type="text" id="edit-username" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="edit-realname">真实姓名</label>
                    <input type="text" id="edit-realname" placeholder="请输入真实姓名">
                </div>
                <div class="form-group">
                    <label for="edit-email">邮箱</label>
                    <input type="email" id="edit-email" placeholder="请输入邮箱">
                </div>
                <div class="form-group">
                    <label for="edit-phone">手机号码</label>
                    <input type="tel" id="edit-phone" placeholder="请输入手机号码">
                </div>
                <div class="form-group">
                    <label for="edit-password">新密码</label>
                    <input type="password" id="edit-password" placeholder="不修改请留空">
                </div>
                <div class="form-group">
                    <label for="edit-password-confirm">确认新密码</label>
                    <input type="password" id="edit-password-confirm" placeholder="不修改请留空">
                </div>
                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" onclick="resetForm()">重置</button>
                    <button type="submit" class="btn">保存修改</button>
                </div>
            </form>
        </div>

        <!-- 文章管理 -->
        <div class="tab-content" id="articles-content">
            <div class="article-publish">
                <button class="btn" onclick="createNewArticle()">写新文章</button>
            </div>
            <div class="article-list">
                <!-- 文章列表 -->
            </div>
            <div id="pagination" class="pagination">
                <!-- 分页器 -->
            </div>
        </div>
    </div>
</body>
</html>